<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link href="../css/iconfont.css" rel="stylesheet" />
    	<link href="../css/chazhao.css" rel="stylesheet" />
	</head>

	<body>
		<!--  顶部组件      -->
		<header class="mui-bar mui-bar-nav head">
			<h1 class="mui-title">首页</h1>
		</header>
		<nav style="background: #FFFFFF;" id="nav" class="mui-bar mui-bar-tab">
		    <a class="mui-tab-item mui-active" data-href="shouye.html">
		        <span class="mui-icon iconfont icon-shouyeshouyeactive"></span><br>
		        <span class="mui-tab-label">首页</span>
		    </a>
		    <a class="mui-tab-item " data-href="chazhao.html">
		        <span class="mui-icon iconfont icon-chazhao"></span><br>
		        <span class="mui-tab-label">查找</span>
		    </a>
		    <a class="mui-tab-item" data-href="chexing.html">
		        <span class="mui-icon iconfont icon-qiche"></span><br>
		        <span class="mui-tab-label">车型</span>
		    </a>
		    <a class="mui-tab-item" data-href="jituan.html">
		        <span class="mui-icon iconfont icon-xinwen-copy"></span><br>
		        <span class="mui-tab-label">资讯</span>
		    </a>
		    <a class="mui-tab-item" data-href="wode.html">
		        <span class="mui-icon iconfont icon-wo"></span><br>
		        <span class="mui-tab-label">我的</span>
		    </a>
		</nav>
		<script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" charset="utf-8">
			// 主窗口和侧滑窗口
			var main = null,
				menu = null;
			// 设置一个中间量，用于判定动画效果开始
			var isInTransition = false;
			// 设置变量用于判定侧滑窗口的打开/关闭状态
			var showMenu = false;
			/**
			 * 首先附上webview选项卡切换的官方例子的地址
			 * Hello Mui示例代码中examples/tab-webview-main.html
			 * 官方例子中窗口切换部分的mui.extend()，在下没有看懂；
			 * 所以自己写的相对简单些，如果哪位朋友读懂了，希望可以为在下解答一下；
			 */
			mui.init();
			mui.plusReady(function() {
				/**
				 * 获取当前窗口对象
				 * http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.currentWebview
				 */
				main = plus.webview.currentWebview();
				/**
				 * 根据入口不同，隐藏/关闭入口页面，有时候我们做webview模式的侧滑，上一级的页面会影响侧滑页的zindex；
				 * http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.opener
				 * http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.hide
				 * http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.close
				 */
				var entrance = main.entrance;
				if (entrance === "login") {
					main.opener().close("none");
				} else {
					main.opener().hide("none");
				}
				/**
				 * 获取顶部栏的文本节点
				 * 关于querySelector()和querySelectorAll()
				 * http://www.cnblogs.com/Wayou/p/html5_web_api_queryselector.html
				 */
				var title = document.querySelector(".mui-title");
				// 将子窗口的地址存在数组中，方便进行遍历，创建子窗口；
				var subpageArr = ["shouye.html", "chazhao.html", "chexing.html","jituan.html","wode.html"];
				/**
				 * 设置子窗口的样式，顶部默认44px，底部默认50px，并且设置窗口无滚动条；
				 * http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewStyle
				 */
				var subStyles = {
					top: "45px",
					bottom: "50px",
					scrollIndicator: "none"
				};
				// 生成三个子窗口，并添加至主窗口；
				var subpage = null;
				for (var i = 0, subLength = subpageArr.length; i < subLength; i++) {
					// http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.create
					// 这里将窗口id设置与窗口相对路径一致，方面下一步切换操作
					subpage = plus.webview.create(subpageArr[i], subpageArr[i], subStyles);
					/**
					 * 除第一个子窗口外，其它子窗口均隐藏（无动画效果）；
					 * 这里我们是直接获取的一个webviewObject，所以并不是调用webview的hide()方法，而是webviewObject的hide()方法；
					 * http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.hide
					 */
					if (i > 0) {
						subpage.hide("none");
					}
					// http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.append
					main.append(subpage);
				}
				/**
				 * 子页面切换
				 */
				var tabs = document.querySelectorAll(".mui-tab-item");
				// 设置中间变量，用于存储当前处于展示状态窗口的标识（这里用的标识是窗口的相对地址），默认是第一个窗口；
				var activeTab = subpageArr[0];
				var targetTab = "";
				for (var j = 0, tabLength = tabs.length; j < tabLength; j++) {
					tabs[j].addEventListener("tap", function() {
						// 获取当前点击的选项目标窗口的标识，比较所选项与处于展示状态窗口的标识进行对比；
						targetTab = this.getAttribute("data-href");
						if (targetTab === activeTab) {
							return;
						}
						// 改变顶部栏的文字
						title.innerHTML = this.querySelector(".mui-tab-label").innerHTML;
						/**
						 * 展示目标窗口，隐藏当前展示的窗口；
						 * 这里要先展示，后隐藏，避免切换慢造成白屏；
						 * http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.show
						 * http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.hide
						 */
						plus.webview.show(targetTab, "fade-in", 300);
						plus.webview.hide(activeTab);
						// 将目标窗口，也就是现在处于展示状态窗口的标识，赋值给中间变量；
						activeTab = targetTab;
					});
				}
				/*
				 * 处理侧滑窗口，可以根据实际业务延时加载；
				 * 具体可以参考hello mui 的index.html部分
				 * http://dev.dcloud.net.cn/mui/window/#preload
				 */
				setTimeout(function() {
					menu = mui.preload({
						url: "side.html",
						id: "side",
						styles: {
							left: 0,
							width: "70%",
							zindex: -1
						},
						show: {
							aniShow: "none"
						}
					});
				}, 200);
				// 点击左上角图标展示侧滑窗口
				document.getElementById("sideMenu").addEventListener("tap", function() {
					if (showMenu) {
						closeMenu();
					} else {
						openMenu();
					}
				});
				/*
				 * 遮罩点击事件，官方没有提供API，自己测试就明白了；
				 * 点击遮罩，关闭侧滑窗口；
				 */
				main.addEventListener("maskClick", closeMenu);
			});
			/*
			 * 打开侧滑窗口
			 */
			function openMenu() {
				if (isInTransition) {
					return;
				}
				if (!showMenu) {
					// 侧滑菜单处于隐藏状态，则立即显示出来
					isInTransition = true;
					// http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.setStyle
					menu.setStyle({
						mask: "rgba(0,0,0,0)"
					}); //menu设置透明遮罩防止点击
					// http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.show
					menu.show("none", 0, function() {
						//主窗体开始侧滑并显示遮罩
						main.setStyle({
							mask: "rgba(0,0,0,0.4)",
							left: "70%",
							transition: {
								duration: 150
							}
						});
						/*
						 * mui.later()是mui封装的setTimeout()
						 * 具体更多参数，可以看下mui.js的源码；
						 */
						mui.later(function() {
							isInTransition = false;
							menu.setStyle({
								mask: "none"
							}); //移除menu的mask
						}, 160);
						showMenu = true;
					});
				}
			}
			/*
			 * 关闭侧滑窗口
			 */
			function closeMenu() {
				if (isInTransition) {
					return;
				}
				if (showMenu) {
					/*
					 * 关闭遮罩
					 * 主窗体开始侧滑
					 */
					isInTransition = true;
					main.setStyle({
						mask: "none",
						left: "0",
						transition: {
							duration: 200
						}
					});
					showMenu = false;
					// 等动画结束后，隐藏菜单webview，节省资源；
					mui.later(function() {
						isInTransition = false;
						menu.hide("none");
					}, 300);
				}
			}
			/*
			 * 当前窗口添加事件
			 */
			// 主界面向右滑动，若菜单未显示，则显示菜单；否则不做任何操作
			window.addEventListener("swiperight", openMenu);
			// 主界面向左滑动，若菜单已显示，则关闭菜单；否则，不做任何操作；
			window.addEventListener("swipeleft", closeMenu);
			// 侧滑窗口触发的关闭侧滑窗口自定义事件
			window.addEventListener("menu:close", closeMenu);
			/**
			 * Android返回键处理（IOS只能通过home键来杀掉程序）
			 * 返回逻辑：一秒内连续点击两次，退出程序；
			 * 这个官方已经写的很明白了，这里需要加上这一段代码，防止返回到入口页面；
			 * http://www.html5plus.org/doc/zh_cn/runtime.html#plus.runtime.quit
			 */
			var first = null;
			mui.back = function() {
				if (!first) {
					first = new Date().getTime();
					plus.nativeUI.toast("再按一次退出应用");
					setTimeout(function() {
						first = null;
					}, 1000);
				} else {
					if (new Date().getTime() - first < 1000) {
						plus.runtime.quit();
					}
				}
			}
		</script>
	</body>

</html>

